<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>HTML5绘图板</title>
    <style>
       body { background: #abcdef; }
        header { width: 1200px; height: 80px; line-height: 80px; font-size: 40px; margin: 0 auto; text-align: center; }
        footer { width: 1200px; height: 20px; margin: 0 auto; text-align: center; line-height: 20px; }
        .content { width: 1200px; height: 560px; margin: 0 auto; background-color: gray; padding: 1px; }
        h3 { height: 25px; line-height: 25px; text-align: center; margin: 0px auto; }
        .name { height: 25px; padding: 0px; margin: 0px; }
            .name > li { float: left; background-color: #dcdcdc; list-style: none; width: 238px; height: 25px; margin: 0px 1px; }
        #funct { height: 82px; padding: 0px; margin: 1px 0px; }
            #funct > li { float: left; background-color: #dcdcdc; list-style: none; width: 238px; height: 82px; margin: 0px 1px; }
            #funct button { margin: 10px 20px; cursor: pointer; }
            #funct img { margin: 5px 0px 5px 30px; height: 25px; width: 35px; border: 1px solid #dcdcdc; cursor: pointer; }
                #funct img:hover { margin: 5px 0px 5px 30px; height: 25px; width: 35px; border: 1px solid white; cursor: pointer; }
            #funct .line img { margin: 5px 19px 0px 19px; height: 8px; width: 200px; border: 1px solid #dcdcdc; cursor: pointer; }
                #funct .line img:hover { margin: 5px 19px 0px 19px; height: 8px; width: 200px; border: 1px solid white; cursor: pointer; }
            #funct div { width: 20px; height: 20px; margin: 10px 0px 0px 15px; border: 1px solid #dcdcdc; float: left; cursor: pointer; }
                #funct div:hover { width: 20px; height: 20px; margin: 10px 0px 0px 15px; border: 1px solid white; float: left; cursor: pointer; }
        .on { background-color: yellow; border: 1px solid white; }
        canvas { background-color: white; margin-top: 1px; cursor: crosshair; }
    </style>
</head>
<body>
    <header>HTML5绘图板</header>
    <div class="content">
        <ul class="name">
            <li><h3>图像</h3></li>
            <li><h3>工具</h3></li>
            <li><h3>形状</h3></li>
            <li><h3>线条</h3></li>
            <li><h3>颜色</h3></li>
        </ul>
        <ul id="funct">
            <li><button>清空画布</button></li>
            <li>
                <img src="images/brush.png" data-f="brush" />
                <img src="images/erase.png" data-f="eraser" />
                <img src="images/word.png" data-f="text" />
            </li>
            <li>
                <img src="images/arc.png" data-f="arc-stroke" />
                <img src="images/rect.png" data-f="rect-stroke" />
                <img src="images/line.png" data-f="line" />
            </li>
            <li class="line">
                <img src="images/line1px.png" data-l="1" />
                <img src="images/line3px.png" data-l="3" />
                <img src="images/line8px.png" data-l="8" />
            </li>
            <li>
                <div style="background-color:rgb(0,0,0);" data-c="rgb(0,0,0)"></div>
                <div style="background-color:rgb(255,0,0);" data-c="rgb(255,0,0)"></div>
                <div style="background-color:rgb(0,255,0);" data-c="rgb(0,255,0)"></div>
                <div style="background-color:rgb(0,0,255);" data-c="rgb(0,0,255)"></div>
                <div style="background-color:rgb(255,255,0);" data-c="rgb(255,255,0)"></div>
                <div style="background-color:rgb(255,255,255);" data-c="rgb(255,255,255)"></div>
            </li>
        </ul>
        <canvas id="board" width="1200" height="450"></canvas>
    </div>
    <footer><small>如有雷同 纯属巧合@ Norlan</small></footer>

    <script>
        var func = document.getElementById('funct'),
            boar = document.getElementById('board'),
            gc = boar.getContext('2d'),
            li = func.children,
            bott = li[0].children[0],
            img1 = li[1].children,
            img2 = li[2].children,
            line = li[3].children,
            cols = li[4].children,
            imgs = [],
            imgsSign = null, colsSign = 'rgb(0,0,0)',
            isMouseDown = false, downX = 0, downY = 0 ;//poly = 3;

        imgs = Array.prototype.concat.apply(imgs, img1);
        imgs = Array.prototype.concat.apply(imgs, img2);

        gc.strokeStyle = 'rgb(0,0,0)';
        gc.fillStyle = 'rgb(0,0,0)';
        gc.lineWidth = 1;

        func.onclick = function (event) {
            var e = window.event || event,
                tag = e.srcElement || e.target,
                par = tag.parentNode,
                i = 0, len = 0;
            if (tag == bott) {
                //点击按钮，重置画布
                gc.clearRect(0, 0, 1200, 450);
            }
            else if (par == li[1] || par == li[2]) {
                //点击工具或绘图的内容
                for (i = 0, len = imgs.length; i < len; i++) {
                    if (tag == imgs[i]) {
                        tag.className = 'on';
                        //获取需要的工具、形状操作，设置并记录
                        imgsSign = tag.getAttribute('data-f');
                    }
                    else {
                        imgs[i].className = '';
                    }
                }
            }
            else if (par == li[3]) {
                //线条选择
                for (i = 0, len = line.length; i < len; i++) {
                    if (tag == line[i]) {
                        tag.className = 'on';
                        //直接设置线条DOM元素设置的线条宽度
                        gc.lineWidth = parseInt(tag.getAttribute('data-l'));
                    }
                    else {
                        line[i].className = '';
                    }
                }
            }
            else if (par == li[4]) {
                //颜色选择
                for (i = 0, len = cols.length; i < len; i++) {
                    if (tag == cols[i]) {
                        tag.style.border = '1px solid white';
                        //获取颜色，并设置给填充和画线样式
                        colsSign = tag.getAttribute('data-c');
                        gc.fillStyle = colsSign;
                        gc.strokeStyle = colsSign;
                    }
                    else {
                        cols[i].style.border = '1px solid #dcdcdc';
                    }
                }
            }
        };
        //鼠标按下事件
        boar.onmousedown = function (event) {
            var e = window.event || event,
                ex = e.x || e.pageX, ey = e.y || e.pageY,
                startX = ex - this.offsetLeft, startY = ey - this.offsetTop;
            //设置鼠标一定按下状态
            isMouseDown = true;
            gc.beginPath();
            if (imgsSign == 'brush' || imgsSign == 'line') {
                //画笔和画直线使用相同的初始设置
                gc.moveTo(startX, startY);
                gc.strokeStyle = colsSign;
            }
            else if (imgsSign == 'eraser') {
                //橡皮擦初始设置和画笔、直线相似，只是画线的颜色为白色。囧。。。
                gc.moveTo(startX, startY);
                gc.strokeStyle = 'rgb(255,255,255)';
            }
            else if (imgsSign == 'arc-stroke' 
                || imgsSign == 'rect-stroke') {
                //形状中圆形、矩形所需的起始点
                downX = startX;
                downY = startY;
            }
            else if (imgsSign == 'text') {
                var text = window.prompt('请输入文字信息', '');
                if (text) {
                    gc.font = '24px 宋体';
                    gc.fillText(text, startX, startY);
                }
                gc.closePath();
            }
        };
        //鼠标移动事件
        boar.onmousemove = function (event) {
            var e = window.event || event,
                ex = e.x || e.pageX, ey = e.y || e.pageY,
                lineX = ex - this.offsetLeft, lineY = ey - this.offsetTop;
            if (imgsSign == 'brush' || imgsSign == 'eraser') {
                //画线和橡皮擦，鼠标在按住并移动时进行绘图
                if (isMouseDown) {
                    gc.lineTo(lineX, lineY);
                    gc.stroke();
                }
            }
        };
        //鼠标移出画布和鼠标抬起事件，处理方式相同
        boar.onmouseout = boar.onmouseup = function (event) {
            var e = window.event || event,
                ex = e.x || e.pageX, ey = e.y || e.pageY,
                endX = ex - this.offsetLeft, endY = ey - this.offsetTop;
            if (imgsSign == 'line') {
                //绘制直线
                if (isMouseDown) {
                    gc.lineTo(endX, endY);
                    gc.stroke();
                }
            }
            else if (imgsSign == 'arc-stroke' ) {
                //绘制圆形
                if (isMouseDown) {
                    gc.arc(downX, downY, Math.sqrt(Math.pow(endX - downX, 2) + Math.pow(endY - downY, 2)), 0, 2 * Math.PI);
                    gc.stroke();
                }
            }
            else if (imgsSign == 'rect-stroke') {
                //绘制矩形
                if (isMouseDown) {
                    gc.rect(downX, downY, endX - downX, endY - downY);
                    gc.stroke();
                }
            }
            isMouseDown = false;
            gc.closePath();
        };
    </script>
</body>
</html>